<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <style>
      .form {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row form">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 mt-4">
          <div class="form-group">
            <label for="name">学生姓名:</label>
            <input
              type="text"
              class="form-control"
              name="name"
              id="name"
              placeholder="学生姓名"
            />
            <label for="age">学生年龄:</label>
            <input
              type="text"
              class="form-control"
              name="age"
              id="age"
              placeholder="学生年龄"
            />
            <label for="sex">学生性别:</label>
            <input
              type="text"
              class="form-control"
              name="sex"
              id="sex"
              placeholder="学生性别"
            />
          </div>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
          <label for="class">学生班级:</label>
          <input
            type="text"
            class="form-control"
            name=""
            id="class"
            placeholder="学生班级"
          />
          <label for="score">学生得分:</label>
          <input
            type="text"
            class="form-control"
            name=""
            id="score"
            placeholder="学生得分"
          />
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-12 text-center">
          <label>学生爱好:</label>
          <input type="checkbox" value="篮球" />篮球
          <input type="checkbox" value="唱" />唱
          <input type="checkbox" value="跳" />跳
          <input type="checkbox" value="rap" />rap

          <button
            type="button"
            class="btn btn-primary"
            onclick="addStudentConfig()"
          >
            添加学生信息
          </button>
        </div>
      </div>
    </div>
    <script>
      // fetch({
      //   url:"",
      //   method:"post",
      //   body: JSON.stringify({uname: '张三',pwd: '789'}),
      //   headers: {'Content-Type': 'application/json'}
      // })
      function $(e) {
        if (e === "[type='checkbox']") {
          return document.querySelectorAll(e);
        }
        return document.querySelector(e);
      }

      function addStudentConfig() {
        let age = $("#age").value;
        let name = $("#name").value;
        let sex = $("#sex").value;
        let className = $("#class").value;
        let score = $("#score").value;
        let hobbies = [];
        for (let i = 0; i < $("[type='checkbox']").length; i++) {
          if ($("[type='checkbox']")[i].checked) {
            hobbies.push($("[type='checkbox']")[i].value);
          }
        }
        fetch("http://localhost:3000/addStudent", {
          method: "post",
          body: JSON.stringify({
            name,
            age,
            sex,
            hobbies,
            class: className,
            score,
          }),
          headers: { "Content-Type": "application/json" },
        })
          .then(function (data) {
            return data.text();
          })
          .then(function (data) {
            console.log(data);
          });
      }
    </script>
  </body>
</html>
